<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>
<script>
    //引入依赖
    import Map from 'ol/Map';
    import TileLayer from 'ol/layer/Tile';
    import {XYZ, TileDebug} from 'ol/source';
    import View from 'ol/View';
    import {fromLonLat} from 'ol/proj';
    export default {
        name: "VectorTileDebug",
        data() {
            return {
            }
        },
        mounted() {
            //实例化图层数据源对象
            var TiandituSource = new XYZ({
                url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=9893433c99cfb657e6ec3a92fe4068e5",
                attributions: "天地图的属性描述",
                wrapX: false
            });
            //实例化Map对象加载地图
            var map = new Map({
                //地图容器div的ID
                target: 'map',
                //地图容器中加载的图层
                layers: [
                    //加载瓦片图层数据（OSM）
                    new TileLayer({
                        source: TiandituSource
                    }),
                    //加载瓦片网格图层
                    new TileLayer({
                        source: new TileDebug({
                            //获取瓦片图层数据对象（osmSource）的网格信息
                            tileGrid: TiandituSource.getTileGrid()
                        })
                    })
                ],
                //地图视图设置
                view: new View({
                    //地图初始中心点
                    center: fromLonLat([87.16552734375, 39.470125122358176]),
                    //地图初始显示级别
                    zoom: 8
                })
            });
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }
</style>